import React, { useRef, useState } from "react";
import { Row, Col, Tabs, Input, List, Card } from "antd";
import { useUpdateEffect, useDebounce } from "ahooks";
import axios from "axios";

const Index = (props) => {
  const { IconFont, navData } = props;
  const [hotTopic, setHotTopic] = useState([]);
  const [hotList, setHotList] = useState(false);
  const [inputVal, setInputVal] = useState("");
  const [searchUri, setSearchUri] = useState("https://www.baidu.com/s?wd=");
  const searchRef = useRef();
  const dInputVal = useDebounce(inputVal, { wait: 500 });
  const dHotListl = useDebounce(hotList, { wait: 500 });

  const onPressEnter = (e) => {
    const win = window.open("about:blank");
    win.location.href = `${searchUri}${dInputVal}`;
    setHotList(false);
    setInputVal("");
    searchRef.current.handleReset(e);
  };

  window.baidu = {
    sug: function (json) {
      if (typeof json === "object" && json?.hasOwnProperty("s")) {
        if (json.s.length > 0) {
          setHotTopic(SearchSugHandle(json.s));
          setHotList(true);
        }
      }
    },
  };

  const SearchSugHandle = (itemArr) => {
    return itemArr.map((item, index) => {
      return { href: `${searchUri}${item}`, text: item, key: index };
    });
  };

  useUpdateEffect(() => {
    if (dInputVal?.length > 0) {
      axios.get(`/api1/su?wd=${dInputVal}`).then((response) => {
        const { data } = response;
        const script = document.createElement("script");
        script.text = data;
        document.getElementsByTagName("head")[0].appendChild(script);
        script.remove();
      });
    }
  }, [dInputVal]);

  const onTabClick = (uri) => {
    setSearchUri(uri);
  };

  const SearchOnChange = (event) => {
    event.target.value.length > 0
      ? setInputVal(event.target.value)
      : setInputVal([]);
    setHotList(false);
  };

  const searchListCss = {
    padding: 0,
    position: "absolute",
    zIndex: 5,
    width: "100%",
    background: "rgb(258 258 258 / 90%)",
    borderRadius: "10px",
    marginTop: "5px",
    boxShadow: "0 0 10px #aaa",
  };

  return (
    <Row justify="center">
      <Col span={24} xl={16}>
        <Tabs type="card" className="bear-tabs" onTabClick={onTabClick}>
          {navData.data.map((item) => {
            return (
              <Tabs.TabPane
                tab={
                  <span>
                    <IconFont type={item.icon} />
                    {item.title}
                  </span>
                }
                key={item.uri}
              ></Tabs.TabPane>
            );
          })}
        </Tabs>
        <Input
          className="search"
          ref={searchRef}
          onChange={SearchOnChange}
          onBlur={()=>{setHotList(false)}}
          onPressEnter={onPressEnter}
          placeholder="输入文字进行搜索"
        />
        <Card bodyStyle={searchListCss}>
          {dHotListl ? (
            <List
              size="small"
              className="searchList"
              split={false}
              dataSource={hotTopic}
              renderItem={(item) => (
                <a href={item.href} target="_blank" rel="noreferrer">
                  <List.Item>{item.text}</List.Item>
                </a>
              )}
            />
          ) : (
            ""
          )}
        </Card>
      </Col>
    </Row>
  );
};

export default Index;
